<template>
  <view>
    <view class="t-index-address">
      <scroll-view class="t-index-address__scroll-view" :scroll-into-view="scrollview" :scroll-y="true"
                   :enable-flex="true">
        <view :id="group.initial" v-for="group in itemList" :key="group.initial">
          <view class="t-index-address__anchor">
            <text>{{ group.initial }}</text>
          </view>
          <view class="t-index-address__list">
            <view class="t-index-address__cell" v-for="(item, index) in group.list" :key="index"
                  @click="selectd(item)">
              <text :class="'iconfont '+item.icon " style="font-size: 30px;margin-right: 10px"></text>
              <text>{{ item.type_title }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="t-index-address__sidebar">
        <view class="t-index-address__index" v-for="group in itemList" :key="group.initial"
              @touchstart.stop.prevent="onTouchMove(group.initial)" @touchend.stop.prevent="onTouchStop"
              @touchcancel.stop.prevent="onTouchStop">
          <span>{{ group.initial }}</span>
        </view>
      </view>
      <view class="t-index-address__alert" v-if="touchmove">
        <text>{{ activeIndex }}</text>
      </view>
    </view>
    <AssetUpdate :visible="showPopup" ref="assetUpdateRef" :title-update="false" @close="closePopup" :obj="asset"
                 @updateConfirm="updateConfirm"></AssetUpdate>

  </view>
</template>

<script>
import {addAsset, getAssetType} from "../../api/api";
import AssetUpdate from "../../pages/asset/AssetUpdate.vue";

export default {
  components: {AssetUpdate},
  data() {
    return {
      scrollview: "A",
      cityList: [],
      activeIndex: "A",
      touchmove: false,
      itemList: [],

      showPopup: false,
      asset: {}
    };
  },
  watch: {
    activeIndex(value) {
      this.scrollview = value;
    },
  },
  methods: {
    async selectd(item) {
      this.asset = {
        type_id: item.id,
        title: item.type_title,
        icon:item.icon
      }
      this.showPopup = true
    },
    closePopup() {
      this.showPopup = false
    },
    async updateConfirm(e) {
      await addAsset(e, true);
      this.showPopup = false

      // uni.navigateBack({
      //   delta:1,//返回层数，2则上上页
      // })
    },
    onTouchMove(index) {
      this.activeIndex = index;
      this.touchmove = true;
    },
    onTouchStop() {
      this.touchmove = false;
    },
  },
  async onLoad(options) {
    uni.showLoading({title:"加载中"})
    let {parent_id} = options
    console.log(parent_id)
    let assetTypeList = await getAssetType(null, parent_id);
    console.log(assetTypeList)

    let map = {}

    if (assetTypeList != null && assetTypeList.length > 0) {
      assetTypeList.map(item => {

        const firstChar = item.pinyin.charAt(0);
        if (map[firstChar] !== undefined) {
          map[firstChar].push(item)
        } else {
          const items = []
          items.push(item);
          map[firstChar] = items;
        }
      })
    }

    const list = [];
    for (let key in map) {
      let obj = {
        initial: key,
        list: map[key]
      }
      list.push(obj)
    }

    this.itemList = list

    setTimeout(function () {
      uni.hideLoading()
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.t-index-address {
  height: 100%;

  &__scroll-view {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    overflow: auto;
  }

  &__anchor {
    width: 100%;
    font-size: 28rpx;
    font-weight: bold;
    color: black;
    margin: 10rpx 10rpx 10rpx 10rpx;
  }

  &__list {
    margin: 10rpx 10rpx 10rpx 10rpx;
    background-color: rgb(245, 245, 245);
  }

  &__cell {
    display: flex;
    align-items: center;
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 2px dashed #eee;
    padding: 3px;
    font-weight: bold;

    &:last-child {
      border: none;
    }
  }

  &__sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 99;
  }

  &__index {
    padding: 10rpx 20rpx;
    font-size: 22rpx;
    font-weight: 500;
    line-height: 1;
  }

  &__alert {
    position: fixed;
    top: 50%;
    right: 90rpx;
    z-index: 99;
    margin-top: -60rpx;
    width: 120rpx;
    height: 120rpx;
    font-size: 50rpx;
    color: #fff;
    border-radius: 24rpx;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
